<!--
 * @Author: wjk
 * @Date: 2019-11-18 17:28:48
 * @LastEditors: wjk
 * @LastEditTime: 2020-12-21 13:43:34
 * @description: base image
 -->
<template>
  <image
    :class="'bx-image ' + className + (isHead ? ' tou-image' : '')"
    :style="styleObj"
    :lazy-load="lazy"
    :src="url"
    :mode="mode"
    @click="handleEvent($event, 'click')"
    @longpress="handleEvent($event, 'longpress')"
    @load="handleEvent($event, 'load')"
    @error="handleEvent($event, 'error')" />
</template>

<script>
export default {
  name: 'BaseImage',
  props: {
    // 图片请求地址
    src: {
      type: String,
      require: true,
      default: ''
    },
    // 是否开启懒加载
    lazy: {
      type: Boolean,
      default: true
    },
    className: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'scaleToFill' // scaleToFill: fiil; aspectFit: 全显示; aspectFill: 截取短边; widthFix: 保持比例
    },
    // 图片高度及oss请求图片的高
    height: {
      type: [String, Number],
      default: ''
    },
    // 图片宽度及oss请求图片的宽
    width: {
      type: [String, Number],
      default: ''
    },
    xWidth: {
      type: Number,
      default: 750
    },
    isAsset: { // 网络图
      type: Boolean,
      default: false
    },
    isHead: { // 是否是头像
      type: Boolean,
      default: false
    },
    needClip: { // 是否需要裁减
      type: Boolean,
      default: true
    },
    autoSet: { // 加载完是否自动设置原来图片宽高
      type: Boolean,
      default: false
    },
    from: { // 组件哪里引入
      type: String,
      default: ''
    }
  },
  data() {
    return {
      url: '',
      screenWidth: 0,
      styleObj: ''
    }
  },
  watch: {
    src(f, t) {
      this._initImage()
    }
  },
  created() {
    const res = uni.getSystemInfoSync()
    this.screenWidth = res.screenWidth
    this._initImage()
  },
  methods: {
    _initImage() {
      let src = ''
      if ((this.src.indexOf('oss-uat.bisinuolan.cn') > 0 || this.src.indexOf('oss.bisinuolan.cn') > 0) && this.src.indexOf('resize') === -1) {
        src = this.src.split('?')[0] + '?x-oss-process=image/resize,w_' + this.xWidth
        if (this.width && this.height && this.needClip) {
          src = this.src.split('?')[0] + `?x-oss-process=image/resize,m_fill,h_${this.rpxTopx(this.height * 2)},w_${this.rpxTopx(this.width * 2)}`
        }
      } else {
        src = this.src
      }
      if (this.width && this.height) {
        this.styleObj = `width: ${this.width}rpx; height: ${this.height}rpx;`
      }
      if (this.isAsset) {
        src = process.env.VUE_APP_IMAGE_ASSET + src.replace('/static', '')
      }
      this.url = src
    },
    rpxTopx(rpx) {
      return Math.ceil(rpx / 750 * this.screenWidth)
    },
    handleEvent(e, type) {
      switch (type) {
        case 'load':
          this.$emit(type, e)
          if (this.autoSet) {
            if (this.from === 'home') {
              this.styleObj += 'width:' + Math.ceil(e.detail.width / e.detail.height * 50) + 'rpx;height: 82rpx;margin-bottom: 6rpx;'
            } else {
              this.styleObj += 'width:' + e.detail.width + 'rpx;height: ' + e.detail.height + 'rpx;'
            }
          }
          this.styleObj += 'background: none;'
          break
        case 'longpress':
        case 'click':
        case 'error':
          this.$emit(type, e)
          break
        default:
          break
      }
    }
  }

}
</script>

<style lang="scss" >
.bx-image{
  background: #f5f5f5 url('../../static/images/default.png') no-repeat center center;
  background-size: contain;
  width: 100%;
  height: 100%;
}
.tou-image{
  background: #f5f5f5 url('../../static/images/app_logo.png') no-repeat center center;
  background-size: contain;
  width: 100%;
  height: 100%;
}
</style>
